<template>
  <div class="iptarea">
    <div class="head">
      <img
        v-lazy="
          `http://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=50y50`
        "
      />
    </div>
    <div>
      <div class="m-cmmtipt clearfix">
        <div class="u-txtwrap" @mousedown="open">
          <textarea class="u-txt area" placeholder="评论"></textarea>
        </div>
        <div class="btns clearfix">
          <i class="u-icn u-icn-36 u-icn icn"></i>
          <i class="u-icn u-icn-41 u-icn icn" @mousedown="open"></i>
          <a href="javascript:;" class="btn u-btn">评论</a>
          <span class="zs s-fc4">140</span>
        </div>
        <div class="corr u-arr">
          <em class="arrows arrline">◆</em>
          <span class="arrclr arrows">◆</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { getLoginStatusFn } from "@/api/index.js";
import openLogin from "@/baseFnMixin/login/openLoginMixin.js";
export default {
  name: "CommentInputBox",

  setup() {
    const open = openLogin();
    return {
      open,
    };
  },
};
</script>

<style scoped lang="less">
.iptarea {
  margin-bottom: 20px;
  .head {
    float: left;
    width: 50px;
    height: 50px;
    margin-right: -100px;
    img {
      float: left;
      width: 50px;
      height: 50px;
      margin-right: -100px;
    }
  }
  .m-cmmtipt {
    position: relative;
    margin-left: 62px;
    .area {
      height: 50px;
      display: block;
    }
    .btns {
      position: relative;
      padding-top: 10px;
      clear: both;
    }
    .corr {
      position: absolute;
      top: 11px;
      left: -7px;
    }
  }
}
.u-txtwrap {
  position: relative;
  padding-right: 14px;
}
textarea.u-txt {
  width: 100%;
  margin-right: -20px;
}
.u-icn {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}
.u-icn-36 {
  width: 18px;
  height: 18px;
  background-position: -40px -490px;
}
.u-icn-41 {
  width: 18px;
  height: 18px;
  background-position: -60px -490px;
}
.icn {
  float: left;
  margin: 0px 10px 0 0;
  cursor: pointer;
}
.btn {
  float: right;
  width: 46px;
  height: 25px;
  background-position: -84px -64px;
  color: #fff;
  text-align: center;
  line-height: 25px;
}
.zs {
  float: right;
  margin-right: 10px;
  line-height: 25px;
}
.u-arr {
  width: 13px;
  height: 14px;
  overflow: hidden;
}
.arrline {
  color: #cdcdcd;
}
.arrows {
  display: block;
  font-family: "SimSun";
  font-size: 15px;
  font-style: normal;
  font-weight: normal;
  height: 10px;
  line-height: normal;
}
.arrclr {
  margin: -10px 0 0 1px;
  color: #fff;
}
</style>
